<template>
	<view id="app">
		<view style="padding-bottom: 115rpx;">
			<view style="display: flex;padding: 30px 0 10px 10px;background-color: #FF7900;">
				<view>
					<span style="color: white;font-weight: bold;font-size: 20px;text-overflow:ellipsis;white-space: nowrap;overflow:hidden;width:75px;">{{qu!="区" ? qu : (shi!="市" ? shi : (sheng!="省" ? sheng : "定位中"))}}</span>
				</view>
				<view style="margin-left: 10px;">
					<u-search placeholder="搜索商家" :show-action="false" style="width: 90px;" @change="sousuo"></u-search>
				</view>
			</view>
			<view style="display: flex;" @click="value = true">
				<view class="mui-table-cell">
					<view style="font-size: 30rpx;">{{sheng}}<uni-icons type="arrowdown" style="margin-left: 20px;" /></view>
				</view>
				<view class="mui-table-cell">
					<view style="font-size: 30rpx;">{{shi}}<uni-icons type="arrowdown" style="margin-left: 20px;" /></view>
				</view>
				<view class="mui-table-cell">
					<view style="font-size: 30rpx;">{{qu}}<uni-icons type="arrowdown" style="margin-left: 20px;" /></view>
				</view>
			</view>
			<!-- 城市弹出层 -->
			<view class="u-demo-area">
				<city-select v-model="value" @city-change="cityChange"></city-select>
			</view>
			<view style="padding-left: 50rpx;background-color: white;">
				<view class="item" v-for="(item ,i) in merchantList" :key="item.id" @click="goMerchant(item.id,item.phone,item.addr,item.name,item.icon)" style="display: flex;padding-top: 20rpx;padding-bottom: 20rpx;">
					<view class="imgbox">
						<image :src="switchImg(item.icon)" mode="heightFix" style="max-width: 110rpx;height: 110rpx;"></image>
					</view>
					<view class="goods-info" style="padding-left: 20rpx;">
						<view class="mName" style="font-size: 18px;">{{item.name}}</view>
						<view class="address" style="color: #82848A;">{{item.addr}}</view>
						<view class="place" style="color: #82848A;">{{item.detail}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-tabbar v-model="current" :list="list" :mid-button="false"></u-tabbar> -->
		<view class="tabbar">
			<view style="text-align: center;" @click="tabbarPage(0)">
				<uni-icons type="home" size="20"></uni-icons>
				<view>首页</view>
			</view>
			<view style="text-align: center;color: #FF7900;">
				<uni-icons type="map" color="#FF7900" size="20"></uni-icons>
				<view>联盟商家</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(2)">
				<uni-icons type="list" size="20"></uni-icons>
				<view>分类</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(3)">
				<uni-icons type="cart" size="20"></uni-icons>
				<view>购物车</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(4)">
				<uni-icons type="person" size="20"></uni-icons>
				<view>个人中心</view>
			</view>
		</view>
	</view>
</template>

<script>
	import citySelect from './ucitySelect.vue';
	import amap from '../../utils/amap-wx.130.js';		// 高德小程序插件  
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				height: 30,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				value: false,
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: "/pages/jifen/index"
					},
					{
						iconPath: "grid",
						selectedIconPath: "grid-fill",
						text: '联盟商家',
						customIcon: false,
						pagePath: "/pages/jifen/merchant/merchantList"
					},
					{
						iconPath: "coupon",
						selectedIconPath: "coupon-fill",
						text: '分类',
						customIcon: false,
						pagePath: "/pages/jifen/goods/goodsFenlei"
					},
					{
						iconPath: "shopping-cart",
						selectedIconPath: "shopping-cart-fill",
						text: '购物车',
						customIcon: false,
						pagePath: "/pages/jifen/cart/cart"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/jifen/center/center"
					},
				],
				current: 1,
				value1: 1,
				value2: 1,
				value3: 1,
				sheng: "省",
				shi: "市",
				qu: "区",
				options1: [],	//省份集合
				options2: [],	//城市集合
				options3: [],	//区县集合
				merchantList: [],//联盟商家集合
				key: '2f7f27be426ba68483764cd2e9f2c968' ,
			}
		},
		onLoad() {
			//查询省份
			// this.$http.get('/center/place/provices', {}).then(res => {
			// 	if(res.data.code == 200) {
			// 		for(var i in res.data.data) {
			// 			this.options1.push({label:res.data.data[i].prName , value:res.data.data[i].prId})
			// 		}
			// 	}
			// });
			//使用高德插件定位
			this.amapPlugin = new amap.AMapWX({  	// 初始化高德插件
				key: this.key  
			}); 
			this.amapPlugin.getRegeo({  
				success: (data) => {
					// this.addressName = data[0].name.substr(0,3); 
					this.sheng = data[0].regeocodeData.addressComponent.province;
					let shiqu = data[0].regeocodeData.addressComponent.city;
					if(shiqu==null || shiqu=="" || shiqu==undefined || shiqu.length<1){
						
					}else{
						this.shi = shiqu;
					}
					this.qu = data[0].regeocodeData.addressComponent.district;
					console.log("联盟商家页面  省份："+this.sheng+" 城市："+this.shi+" 区域："+this.qu)
					uni.setStorageSync("areaName",this.qu);
					//查询定位地址的联盟商家
					this.$http.get('/gzh/searchGzh', {
						p: this.sheng=='省' ? '' : this.sheng,
						c: this.shi=='市' ? '' : this.shi,
						a: this.qu=='区' ? '' : this.qu
					}).then(res => {
						if(res.data.code==200){
							this.merchantList=res.data.data;
						}
					});
				},
				fail: (res) => {
					console.log(JSON.stringify(res));
				}
			});   
		},
		methods: {
			//底部tab跳转
			tabbarPage(index){
				uni.redirectTo({
					url:index==0?'../index':(index==2?'../goods/goodsFenlei':(index==3?'../cart/cart':'../center/center'))
				})
			},
			cityChange(e) {
				// console.log("省份："+e.province.label+" 城市："+e.city.label+" 区县："+e.area.label)
				if(e.province.label != undefined){
					this.sheng=e.province.label;
				}else{
					this.sheng="省";
				}
				if(e.city.label != undefined){
					this.shi=e.city.label;
				}else{
					this.shi="市";
				}
				if(e.area.label != undefined){
					this.qu=e.area.label;
				}else{
					this.qu="区";
				}
				//查询省份下面的联盟商家
				this.$http.get('/gzh/searchGzh', {
					p: this.sheng=='省' ? '' : this.sheng,
					c: this.shi=='市' ? '' : this.shi,
					a: this.qu=='区' ? '' : this.qu
				}).then(res => {
					if(res.data.code==200){
						this.merchantList=res.data.data;
					}
				});
			},
			//跳转联盟商家详情页
			goMerchant(gzhId,phone,addr,name,icon){
				uni.navigateTo({
					url:'../merchant/merchant?gzhId='+gzhId+"&phone="+phone+"&addr="+addr+"&name="+name+"&icon="+icon
				})
			},
			//搜索联盟商家
			sousuo(res){
				console.log("来搜索了："+res)
				//根据联盟商家名称搜索联盟商家
				this.$http.get('/gzh/searchGzh_by_name', {
					p:this.sheng,
					c:this.shi,
					// p:'湖南省',
					// c:'株洲市',
					key: res
				}).then(res => {
					if(res.data.code==200){
						this.merchantList=res.data.data;
					}
				});
			},
			change1(index) {
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				// this.$refs.uDropdown.highlight(xxx);
				console.log("选中的省份ID："+index);
				for(var i in this.options1) {
					if(this.options1[i].value==index){
						this.sheng = this.options1[i].label;
						//查询选中省份的城市
						this.$http.get('/center/place/citys', {
							id: index
						}).then(res => {
							this.options2=[];this.options3=[];
							this.shi="市";this.qu="区";
							for(var i in res.data.data) {
								this.options2.push({label:res.data.data[i].ctName , value:res.data.data[i].ctId})
							}
						});
						//查询省份下面的联盟商家
						this.$http.get('/gzh/searchGzh', {
							p: this.sheng
						}).then(res => {
							if(res.data.code==200){
								this.merchantList=res.data.data;
							}
						});
						break;
					}
				}
			},
			change2(index) {
				console.log("选中的城市ID："+index);
				for(var i in this.options2) {
					if(this.options2[i].value==index){
						this.shi = this.options2[i].label;
						//查询选中城市的区县
						this.$http.get('/center/place/areas3', {
							id: index
						}).then(res => {
							this.options3=[];
							this.qu="区";
							for(var i in res.data.data) {
								this.options3.push({label:res.data.data[i].arName , value:res.data.data[i].arId})
							}
						});
						//查询省份下面的联盟商家
						this.$http.get('/gzh/searchGzh', {
							p: this.sheng,
							c: this.shi,
						}).then(res => {
							if(res.data.code==200){
								this.merchantList=res.data.data;
							}
						});
						break;
					}
				}
			},
			change3(index) {
				console.log("选中的区县ID："+index);
				for(var i in this.options3) {
					if(this.options3[i].value==index){
						this.qu = this.options3[i].label;
						//查询省份下面的联盟商家
						this.$http.get('/gzh/searchGzh', {
							p: this.sheng,
							c: this.shi,
							a: this.qu
						}).then(res => {
							if(res.data.code==200){
								this.merchantList=res.data.data;
							}
						});
						break;
					}
				}
			},
			switchImg(images){
				// console.log("项目地址："+this.host+" 联盟商家图片："+images);
				if(images.length>0){
					if(images.indexOf("http")!=-1){//图片地址中包含“http”
						return images;
					}
					return this.host+images;
				}
				return '../../static/center/tuijian.png';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbarImage{
		width: 20px;
		height: 20px;
	}
	.tabbar{
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-align: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
		box-sizing: content-box;
		justify-content: space-around;
		background-color: white;
		font-size: 11px;
		padding: 20rpx 0 20rpx 0;
		border-top: 1rpx #DCDFE6 solid;
	}
	
	.mui-content a {
		color: #8F8F94;
	}
	.mui-content a.active {
		color: #007aff;
	}
	.u-dropdown__menu__item{
		border-right:1rpx #c8c8c8 solid;
	}
	.uni-scroll-view-content{
		height: 527px;
	}
	.mui-table-cell{
		width: 33.3%;
		height: 40px;
		border: 1rpx solid #dcdcdc;
		line-height: 40px;
		padding-left: 3%;
		overflow:hidden;
	    text-overflow:ellipsis;
	    white-space:nowrap;
	}
</style>
